<template>
    <div :class="{'message-content': isActive,'message-content2': !isActive}"  v-show="show" >
      <section class="title">
        <img style="width:22px;margin-left:21px" src="~@/assets/img/yichang.png" alt="">
      <span style="padding-left:5px">异常预警（{{count}}）</span>
      </section>
      <section class="message">
        <section v-for="item in text">
          {{ item.warnDescribe }}
        </section>
      </section>
      <section  class="line">
      </section>
      <section class="but" @click="close">
        <section > </section>
        忽略异常
      </section>
    </div>
</template>

<script>
export default {
    name: "",
    props: {
        type: {
            type: String,
            default: ""
        },
        count:{
          type:Number,
          default:0
        },
        text: {
            type: Array,
            default: []
        },
        show: {
            type: Boolean,
            default: false
        }
    },
  watch:{
    text(val){
      console.log(val)


    }

  },
    data() {
        return {
          textArray:[],
          isActive:true

        };
    },
    methods:{
      close(){
        this.isActive=false;

      }

    }
};

</script>

<style lang="scss" scoped>
.message-content2 {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 10px;
    width: 346px;
    min-height: 228px;
    padding-top: 10px;
     z-index: 99;
    background: #ffffff;
    // border: 1px solid #eeeeee;
    box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.1);
    border-radius: 8px 3px 8px 8px;
    .title{
      height: 31px;
      line-height: 22px;
      border-bottom: 1px #f7f7f7 solid;
    }
    .message{

      width: 90%;
      position: relative;
      margin: 8px 20px 0px 20px;
      line-height: 30px;
      padding-bottom: 30px;
    }
    .but{

      position: absolute;
      right: 15px;
      color: #1089FF;
      // border-top: 1px #f7f7f7 solid;
      min-height: 30px;
      max-height: 30px;
      bottom: 2px;
      cursor: pointer;

    }

}
.message-content {

    position: fixed;
    right: 20px;
    z-index: 99;
    bottom: 10px;
    width: 346px;
    min-height: 228px;
    padding-top: 10px;

    background: #ffffff;
    // border: 1px solid #eeeeee;
    box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.1);
    border-radius: 8px 3px 8px 8px;
    .title{
      height: 31px;
      line-height: 22px;
      border-bottom: 1px #f7f7f7 solid;
    }
    .message{

      width: 90%;
      position: relative;
      margin: 8px 20px 0px 20px;
      line-height: 30px;
      padding-bottom: 30px;
    }
    .but{

      position: absolute;
      right: 15px;
      color: #1089FF;
      // border-top: 1px #f7f7f7 solid;
      min-height: 30px;
      max-height: 30px;
      bottom: 2px;
      cursor: pointer;

    }

}

.message-content.info {

}
.message-content.success {

}
</style>
